<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <base href="<%=request.getContextPath()%>/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息 - 医疗预约系统</title>
    <link rel="stylesheet" href="statics/css/hisStyle.css">
    <style>
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        .header h1 {
            color: #2c3e50;
            margin: 0;
        }
        .logout-btn {
            background-color: #e74c3c;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            text-decoration: none;
        }
        .logout-btn:hover {
            background-color: #c0392b;
        }
        .profile-container {
            display: flex;
            gap: 30px;
            margin-bottom: 40px;
        }
        .sidebar {
            width: 250px;
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .user-info {
            text-align: center;
            margin-bottom: 20px;
        }
        .avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            max-width: 100%;
            max-height: 100%;
            margin-bottom: 15px;
            border: 3px solid #3498db;
            object-fit: cover;
        }
        .menu-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .menu-item {
            margin-bottom: 5px;
        }
        .menu-link {
            display: block;
            padding: 12px 15px;
            color: #555;
            text-decoration: none;
            border-radius: 5px;
            transition: all 0.3s;
        }
        .menu-link:hover {
            background-color: #f5f5f5;
            color: #3498db;
        }
        .menu-link.active {
            background-color: #3498db;
            color: white;
        }
        .content {
            flex: 1;
            background: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .content-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }
        .content-header h2 {
            color: #2c3e50;
            margin: 0;
        }
        .edit-btn {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 5px;
            cursor: pointer;
            text-decoration: none;
        }
        .edit-btn:hover {
            background-color: #2980b9;
        }
        .info-item {
            display: flex;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        .info-label {
            width: 120px;
            color: #7f8c8d;
            font-weight: bold;
        }
        .info-value {
            flex: 1;
            color: #2c3e50;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-weight: bold;
        }
        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
        }
        .form-control:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
        }
        .form-actions {
            margin-top: 30px;
            display: flex;
            gap: 15px;
        }
        .btn-submit {
            background-color: #27ae60;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }
        .btn-submit:hover {
            background-color: #229954;
        }
        .btn-cancel {
            background-color: #95a5a6;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            text-decoration: none;
        }
        .btn-cancel:hover {
            background-color: #7f8c8d;
        }
        .error-message {
            color: #e74c3c;
            background-color: #fdf2f2;
            border: 1px solid #fecaca;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .success-message {
            color: #27ae60;
            background-color: #f0f9f0;
            border: 1px solid #c3e6c3;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        .required-field {
            color: #e74c3c;
        }
        .avatar-upload-wrapper {
            margin-bottom: 20px;
            text-align: center;
        }
        .avatar-upload-preview {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            max-width: 100%;
            max-height: 100%;
            margin-bottom: 10px;
            border: 3px solid #3498db;
            cursor: pointer;
        }
        .avatar-upload-text {
            color: #3498db;
            font-size: 14px;
            cursor: pointer;
        }
        .avatar-upload-text:hover {
            text-decoration: underline;
        }
        .file-input-hidden {
            display: none;
        }
        @media (max-width: 768px) {
            .profile-container {
                flex-direction: column;
            }
            .sidebar {
                width: 100%;
            }
            .form-row {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>医疗预约系统 - 个人中心</h1>
            <a href="auth/logout" class="logout-btn">退出登录</a>
        </div>

        <div class="profile-container">
            <!-- 侧边菜单 -->
            <div class="sidebar">
                <div class="user-info">
                    <img src="statics/images/adminHead/${user.headpic != null ? user.headpic : 'default.png'}" alt="用户头像" class="avatar">
                    <h3>${user.username}</h3>
                    <p>普通用户</p>
                </div>
                <ul class="menu-list">
                    <li class="menu-item"><a href="frontend/profile" class="menu-link active">个人信息</a></li>
                    <li class="menu-item"><a href="frontend/my-appointments" class="menu-link">预约记录</a></li>
                    <li class="menu-item"><a href="frontend/my-reports" class="menu-link">就诊记录</a></li>
                </ul>
            </div>

            <!-- 主要内容 -->
            <div class="content">
                <div class="content-header">
                    <h2>个人基本信息</h2>
                    <a href="frontend/profile?editMode=true" class="edit-btn">编辑信息</a>
                </div>

                <!-- 错误提示 -->
                <c:if test="${not empty error}">
                    <div class="error-message">
                        ${error}
                    </div>
                </c:if>

                <!-- 成功提示 -->
                <c:if test="${not empty success}">
                    <div class="success-message">
                        ${success}
                    </div>
                </c:if>

                <c:choose>
                    <c:when test="${editMode}">
                        <!-- 编辑模式 -->
                        <form action="frontend/update-profile" method="post" enctype="multipart/form-data" id="profileForm">
                            <input type="hidden" name="userid" value="${user.userid}">
                            
                            <div class="avatar-upload-wrapper">
                                <img src="statics/images/adminHead/${user.headpic != null ? user.headpic : 'default.png'}" alt="用户头像" class="avatar-upload-preview" id="avatarPreview" onclick="document.getElementById('file').click()">
                                <p class="avatar-upload-text" onclick="document.getElementById('file').click()">点击更换头像</p>
                                <input type="file" id="file" name="file" class="file-input-hidden" accept="image/*" onchange="previewImage(this)">
                            </div>
                            
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="username">用户名：<span class="required-field">*</span></label>
                                    <input type="text" id="username" name="username" class="form-control" value="${user.username}" required>
                                </div>
                                
                                <div class="form-group">
                                    <label for="realName">真实姓名：<span class="required-field">*</span></label>
                                    <input type="text" id="realName" name="realName" class="form-control" value="${user.realName != null ? user.realName : ''}" required>
                                </div>
                            </div>
                            
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="phone">手机号：<span class="required-field">*</span></label>
                                    <input type="tel" id="phone" name="phone" class="form-control" value="${user.phone}" required pattern="1[3-9]\d{9}">
                                </div>
                                
                                <div class="form-group">
                                    <label for="email">邮箱：</label>
                                    <input type="email" id="email" name="email" class="form-control" value="${user.email != null ? user.email : ''}">
                                </div>
                            </div>
                            
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="idCard">身份证号：</label>
                                    <input type="text" id="idCard" name="idCard" class="form-control" value="${user.idCard != null ? user.idCard : ''}" pattern="\d{17}[\dXx]">
                                </div>
                                
                                <div class="form-group">
                                    <label for="gender">性别：</label>
                                    <select id="gender" name="gender" class="form-control">
                                        <option value="male" ${user.gender == 'male' ? 'selected' : ''}>男</option>
                                        <option value="female" ${user.gender == 'female' ? 'selected' : ''}>女</option>
                                        <option value="other" ${user.gender == 'other' ? 'selected' : ''}>其他</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label for="birthday">出生日期：</label>
                                <input type="date" id="birthday" name="birthday" class="form-control" value="${user.birthday != null ? user.birthday : ''}">
                            </div>
                            
                            <div class="form-actions">
                                <button type="submit" class="btn-submit">保存修改</button>
                                <a href="frontend/profile" class="btn-cancel">取消</a>
                            </div>
                        </form>
                    </c:when>
                    <c:otherwise>
                        <!-- 查看模式 -->
                        <div class="info-item">
                            <div class="info-label">用户名：</div>
                            <div class="info-value">${user.username}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">真实姓名：</div>
                            <div class="info-value">${user.realName != null ? user.realName : '未设置'}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">手机号：</div>
                            <div class="info-value">${user.phone}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">邮箱：</div>
                            <div class="info-value">${user.email != null ? user.email : '未设置'}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">身份证号：</div>
                            <div class="info-value">${user.idCard != null ? user.idCard : '未设置'}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">性别：</div>
                            <div class="info-value">
                                <c:choose>
                                    <c:when test="${user.gender == 'male'}">男</c:when>
                                    <c:when test="${user.gender == 'female'}">女</c:when>
                                    <c:otherwise>未设置</c:otherwise>
                                </c:choose>
                            </div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">出生日期：</div>
                            <div class="info-value">${user.birthday != null ? user.birthday : '未设置'}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">注册时间：</div>
                            <div class="info-value">${user.createTime}</div>
                        </div>
                    </c:otherwise>
                </c:choose>
            </div>
        </div>
    </div>

    <script>
        // 预览头像
        function previewImage(input) {
            if (input.files && input.files[0]) {
                // 检查文件大小（5MB限制）
                if (input.files[0].size > 5 * 1024 * 1024) {
                    alert('文件大小不能超过5MB');
                    input.value = '';
                    return;
                }
                
                // 检查文件类型
                const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/jpg'];
                if (!validTypes.includes(input.files[0].type)) {
                    alert('只支持JPG、PNG、GIF格式的图片');
                    input.value = '';
                    return;
                }
                
                // 预览图片
                var reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('avatarPreview').src = e.target.result;
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        
        // 表单验证
        if (document.getElementById('profileForm')) {
            document.getElementById('profileForm').addEventListener('submit', function(e) {
                const phone = document.getElementById('phone').value;
                const idCard = document.getElementById('idCard').value;
                
                // 手机号验证
                const phoneRegex = /^1[3-9]\d{9}$/;
                if (!phoneRegex.test(phone)) {
                    alert('请输入有效的手机号码');
                    e.preventDefault();
                    return;
                }
                
                // 身份证号验证（如果填写了）
                if (idCard && !/^\d{17}[\dXx]$/.test(idCard)) {
                    alert('请输入有效的身份证号码');
                    e.preventDefault();
                    return;
                }
            });
        }
    </script>
</body>
</html>